<template>
  <view class="page page-index" :style="rootStyle">
    <view>
      <at-search-bar
        placeholder="输入关键词搜索"
        :value="value1"
        @change="onChange('value1', $event)"
        @action-click="onActionClick('value1')"
      />
    </view>
    <panel class="panel__content" title style="margin:10px ">
      <example-item>
        <swiper
          indicatorColor="#999"
          indicatorActiveColor="#333"
          :current="current"
          :duration="duration"
          :interval="interval"
          :circular="isCircular"
          :autoplay="isAutoplay"
          :indicatorDots="hasIndicatorDots"
          previousMargin="20"
        >
          <swiper-item v-for="(item, idx) in imgUrls" :key="idx">
            <image :src="item" class="slide-image" />
          </swiper-item>
        </swiper>
      </example-item>
    </panel>

    <panel>
      <at-tabs
        scroll
        :swipeable="false"
        :current="current2"
        :tab-list="tabList2"
        @click=" handleTabClick('current2', $event)"
      >
        <at-tabs-pane
          v-for="(paneNo, index) in tabList2"
          :key="index"
          :current="current2"
          :index="index"
        >
          <panel class="panel__content" :title="paneNo.title" style="margin:10px">
            <example-item>
              <at-flex wrap="wrap">
                <at-flex-item
                  :size="5"
                  v-for="(item ,idx) in imgUrls "
                  :key="idx"
                  style="margin-bottom:20px; margin-right:20px;"
                >
                  <image :src="item" style="width:100%; height:100px;" />
                  <view>
                    <view class="text">名称：</view>
                    <view class="text">¥ 800</view>
                  </view>
                </at-flex-item>
              </at-flex>
            </example-item>
          </panel>
        </at-tabs-pane>
      </at-tabs>
    </panel>

    <panel no-padding :style="{ paddingBottom: '24px' }">
      <at-tab-bar
        fixed
        :tab-list="tabBars"
        :current="current4"
        @click="handleTabBarClick(4, $event)"
      />
    </panel>
  </view>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, computed, ref } from 'vue'
import Taro from '@tarojs/taro'
import './index.scss'

interface IndexState {
  [key: string]: string
}

interface SwiperPageState {
  current: number
  duration: number
  interval: number
  isCircular: boolean
  isAutoplay: boolean
  hasIndicatorDots: boolean
  imgUrls: string[]
}
export default defineComponent({
  name: 'IndexPage',

  setup() {
    const activeTabBar = reactive({
      current4: 0
    })

    const tabBars = ref([
      { title: '首页', iconType: 'home' },
      { title: '联系我们', iconType: 'phone' }
    ])
    const searchValue = reactive<IndexState>({
      value1: ''
    })

    const swiperPageState = reactive<SwiperPageState>({
      current: 1,
      duration: 500,
      interval: 5000,
      isCircular: true,
      isAutoplay: true,
      hasIndicatorDots: true,
      imgUrls: [
        'https://img10.360buyimg.com/babel/s700x360_jfs/t25855/203/725883724/96703/5a598a0f/5b7a22e1Nfd6ba344.jpg!q90!cc_350x180',
        'https://img11.360buyimg.com/babel/s700x360_jfs/t1/4776/39/2280/143162/5b9642a5E83bcda10/d93064343eb12276.jpg!q90!cc_350x180',
        'https://img14.360buyimg.com/babel/s700x360_jfs/t1/4099/12/2578/101668/5b971b4bE65ae279d/89dd1764797acfd9.jpg!q90!cc_350x180',
        'https://img10.360buyimg.com/babel/s700x360_jfs/t25855/203/725883724/96703/5a598a0f/5b7a22e1Nfd6ba344.jpg!q90!cc_350x180',
        'https://img11.360buyimg.com/babel/s700x360_jfs/t1/4776/39/2280/143162/5b9642a5E83bcda10/d93064343eb12276.jpg!q90!cc_350x180',
        'https://img14.360buyimg.com/babel/s700x360_jfs/t1/4099/12/2578/101668/5b971b4bE65ae279d/89dd1764797acfd9.jpg!q90!cc_350x180'
      ]
    })

    const tabsState = reactive({
      current2: 0
    })

    const tabList2 = ref([
      { title: '标签页1' },
      { title: '标签页2' },
      { title: '标签页3' },
      { title: '标签页4' },
      { title: '标签页5' },
      { title: '标签页6' }
    ])

    const rootStyle = computed(() => {
      const deviceWidth = Taro.getSystemInfoSync().windowWidth
      return Taro.getEnv() === Taro.ENV_TYPE.WEB
        ? {
            width: deviceWidth >= 1024 ? '75%' : '100%',
            margin: 'auto'
          }
        : null
    })

    function onChange(stateName: string, value: string | number): void {
      searchValue[stateName] = value as string
    }

    function onActionClick(stateName: string): void {
      // Taro.showToast({
      //   title: `${searchValue[stateName]}`,
      //   icon: 'success',
      //   duration: 2000
      // })
      Taro.navigateTo({
        url: `/pages/search/index?id=${searchValue[stateName]}`
      })
    }

 



    function handleTabClick(stateName, value) {
      tabsState[stateName] = value
    }

    function handleTabBarClick(num, value) {
      activeTabBar[`current${num}`] = value

      switch (value) {
        case 0:
          Taro.navigateTo({
            url: `/pages/index/index`
          })
          break

        case 1:
          Taro.navigateTo({
            url: `/pages/contactUs/index`
          })

        default:
          break
      }
    }

    return {
      ...toRefs(searchValue),
      ...toRefs(swiperPageState),
      ...toRefs(tabsState),
      ...toRefs(activeTabBar),
      rootStyle,
      tabList2,
      tabBars,
      onChange,
      onActionClick,
      handleTabClick,
      handleTabBarClick
    }
  }
})
</script>
